<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 设置视口，内容宽度等于用户设备宽度，用户不能缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>小车遥控</title>
    <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
    <script src="/js/ezuikit.js"></script>
    <style>
        * {
            /* 清除默认样式*/
            margin: 0;
            padding: 0;
        }
        html {
            /*用于 获取 屏幕的可视宽高，通过js获取html的属性即可*/
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        body {
            /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #FFF;
            font-size: 28px;
            background-color: black;
        }
        @media screen and (orientation:portrait) {
            /*竖屏样式*/
            body {
                transform-origin: 0 0;
                transform: rotateZ(90deg) translateY(-100%);
            }
        }
        .drag{
            /* 拖动区域，在js里设置宽高 */
            /*right: 0;*/
            left: 18%;
            bottom: 5%;
            position: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .joystick{
            left: 18%;/*50%;*/
            bottom: 5%;/*0;*/
            position: absolute;
            background-color: rgba(200,200,200,0.3);    /* 操作杆背景颜色*/
            border: solid 0.5rem rgba(200,200,200,0.1); /* 操作杆边框颜色*/
            border-radius: 50%;
            /* 用户不可选择复制控件文本 */
            -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
            -webkit-user-select:none; /*webkit浏览器*/
            -khtml-user-select:none; /*早期浏览器*/
            -moz-user-select:none;/*火狐*/
            -ms-user-select:none; /*IE10*/
            user-select:none;
        }
        .joystick .inside{    /* 仅仅是为了美观这里，白色拖动按钮*/
            position: absolute;
            border-radius: 50%;
            border: solid 0.3rem rgba(42,42,43,0.2);
            background-color: rgba(255,255,255,0.8);
        }

        /*.drag1{
            right: 18%;
            bottom: 5%;
            position: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .joystick1{
            right: 18%;
            bottom: 5%;
            position: absolute;
            background-color: rgba(200,200,200,0.3);    
            border: solid 0.5rem rgba(200,200,200,0.1); 
            border-radius: 50%;
            -webkit-touch-callout:none;  
            -webkit-user-select:none; 
            -khtml-user-select:none; 
            -moz-user-select:none;
            -ms-user-select:none; 
            user-select:none;
        }
        .joystick1 .inside1{ 
            position: absolute;
            border-radius: 50%;
            border: solid 0.3rem rgba(42,42,43,0.2);
            background-color: rgba(255,255,255,0.8);
        }*/
        /*摄像头方向控制 开始*/
        .change_camera_direction{
          text-align: center;
          position: absolute;
            bottom: -3%;
            right: 5%;
            width: 10rem;
            height: 14rem;
        }
        .change_camera_direction .camera_title{
          color: white;
          font-size: 15px;
          margin: 5% auto;
        }
        .direction_content{
           width: 100%;
           height: 70%;
           position: relative;
        }
        .direction_div{
          position:relative;
          width: 50px;
          height: 50px;
        }
        .direction_div img{
          width: 100%;
          height:  100%;
          opacity: 0.8;
        }
        /*left*/
        .left_direction {
          top: 0%;
          left: 0%; 
        }
        /*bottom*/
        .bottom_direction{
          top:0%;
          left: 33%;
        }
        /*right*/
        .right_direction{
          top: -63%;
          left: 66%;
        }
        /*top*/
        .top_direction{
          top: 0%;
          left: 33%; 
        }
        /*摄像头方向控制 结束*/
        /* 按钮样式 开始*/
        .top{
            display: flex;
            flex-direction: row;
            opacity: 0.8;
        }
        .total{
            width: 10%;
            display: flex;
            flex-direction: column;
            margin-left: 1rem;
            margin-right: 1rem;
        }
        .wenben{
            font-size: 15px;
            text-align: center;
        }
        .btn_swtich_box {
        position:relative;
        width:80px;
        background-size:100% 100%;
        margin-top:10px;
        border-radius:50px;
        }
        .btn_swtich_1bg {
            background-color:#ed4646;
            opacity:0.8;
        }
        .btn_swtich_2bg {
            background-color:#f4f4f4;
            opacity:0.8;
        }
        .btn_swtich_3bg {
            background-color:#4dd865;
            opacity:0.8;
        }
        .btn_swtich_anim {
            position:absolute;
            top:0px;
            background-color:#fff;
            box-shadow:0px 0px 4px 0px #999;
        }
        .btnHide_swtich {
            float:left;
            background-color:transparent;
            opacity:0;
        }
        /* 按钮样式 结束*/
    </style>
</head>
<body>
    <div id="video-container" style="width:100%;height:100%;">
        <div class="top">
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="dcf1" value="100">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">电磁阀1</div>
            </div>
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="dcf2" value="100">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">电磁阀2</div>
            </div>
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="tg1" value="1900">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">推杆1</div>
            </div>
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="tg2" value="1900">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">推杆2</div>
            </div>
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="sbdj" value="100">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">水泵电机</div>
            </div>
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="zmd" value="100">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">照明灯</div>
            </div>
            <div class="total">
                <div class="btn_swtich_box btn_swtich_2bg">
                    <input type="hidden" id="jdq" value="100">
                    <div class="btn_swtich_anim"></div>
                    <div swname="hl" class="btnHide_swtich"></div>
                    <div swname="gb" class="btnHide_swtich"></div>
                    <div swname="kq" class="btnHide_swtich"></div>
                </div>
                <div class="wenben">备用继电器</div>
            </div>
        </div>

        <!-- 左摇杆 -->
        <div class="joystick" id="joystick">
            <div class="inside" id="inside"></div>
        </div>
        <!-- 左摇杆可用的拖动区域 -->
        <div class="drag" id="drag"></div>
        <!--<div class="test" id="test"></div>-->

        <!-- 右摇杆 -->
        <!--<div class="joystick1" id="joystick1">
            <div class="inside1" id="inside1"></div>
        </div>-->
        <!-- 右摇杆可用的拖动区域 -->
        <!--<div class="drag1" id="drag1"></div>-->

        <div class="change_camera_direction">
          <div class="direction_content">
            <div class="direction_div top_direction" onclick="yun(1);">
              <img class="camera_img_up" src="/locks/top.png" />
            </div>
            <div class="direction_div left_direction" onclick="yun(2);">
              <img class="camera_img_left" src="/locks/left.png" />
            </div>
            <div class="direction_div bottom_direction" onclick="yun(3);">
              <img class="camera_img_bottom" src="/locks/bottom.png" />
            </div>
            <div class="direction_div right_direction" onclick="yun(4);">
              <img class="camera_img_right" src="/locks/right.png" />
            </div>
          </div>
        </div>
    </div>
    <script>
        var kuan = document.body.clientWidth;
        var gao = document.body.clientHeight;
        //强制横屏
        (function () {
            function resize() {
                var body = document.getElementsByTagName('body')[0];
                var html = document.getElementsByTagName('html')[0];
                var width = html.clientWidth;
                var height =  html.clientHeight;
                var max = width > height ? width : height;
                var min = width > height ? height : width;
                body.style.width = max + "px";
                body.style.height = min + "px";
            }
            resize();
            window.addEventListener("resize", resize)
        })();

        //视频加载
        var accesstoken = <?php echo "'".$accesstoken."'"; ?>;
        var playr = new EZUIKit.EZUIKitPlayer({
            id: 'video-container', // 视频容器ID
            accessToken: accesstoken,//'at.7see981gd4np38dadkjggqxr6a4aejsy-5bzwib289s-1rww0j0-ubtfxyyu3',
            url: 'ezopen://open.ys7.com/D40096405/1.live',
            template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
            autoplay: true,
            // 视频上方头部控件
            //header: ['capturePicture','save','zoom'],            // 如果templete参数不为simple,该字段将被覆盖
            // 视频下方底部控件
            //footer: ['talk','broadcast','hd','fullScreen'],      // 如果template参数不为simple,该字段将被覆盖
            audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
            plugin: ['talk'],                       // 加载插件，talk-对讲
            openSoundCallBack: (data) => console.log("开启声音回调",data),
            closeSoundCallBack: (data) => console.log("关闭声音回调",data),
            startSaveCallBack: (data) => console.log("开始录像回调",data),
            stopSaveCallBack: (data) => console.log("录像回调",data),
            capturePictureCallBack: (data) => console.log("截图成功回调",data),
            fullScreenCallBack: (data) => console.log("全屏回调",data),
            getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
            handleSuccess: (data) = function(){console.log("播放成功回调",data)},
            handleError: (data) => console.log("播放失败回调",data),
            width:kuan,
            height:gao,
        })

        //链接websocket    
        /*var ws = new WebSocket('ws://120.77.149.44:250');
        // 建立 web socket 连接成功触发事件
        ws.onopen = function () {
            console.log('连接成功!');
            //ws.send('REG_Syk000001');
        };
        //接收到消息的回调方法
        ws.onmessage = function (event) {
            console.log(event.data);//后台不间断发送数据，持续接收。
        }
        //断开 web socket 连接成功触发事件
        ws.onclose = function () {
            console.log('连接已关闭!');
        };*/

        //按钮脚本 开始
        $(".btn_swtich_box").height($(".btn_swtich_box").width() / 2.45);
        $(".btn_swtich_anim").height($(".btn_swtich_box").height() / 1.1);
        $(".btn_swtich_anim").width($(".btn_swtich_box").height() / 1.1);
        $(".btn_swtich_anim").css("border-radius", $(".btn_swtich_box").height() / 2.2);
        $(".btn_swtich_anim").css("margin-top", $(".btn_swtich_box").height() * 0.05);
        $(".btnHide_swtich").height($(".btn_swtich_box").height());
        $(".btnHide_swtich").width($(".btn_swtich_box").width() / 3);
        $(".btn_swtich_anim").css({
            left: 0//$(".btn_swtich_box").width() / 3.45
        });
        $(".btnHide_swtich").on('click', function() {
            var swname = $(this).attr('swname');
            var $parent = $(this).parent();
            if (swname == 'hl') {
                $parent.find(".btn_swtich_anim").animate({
                    left: 0
                }, 300);
                setTimeout(function() {
                    $parent.removeClass("btn_swtich_1bg");
                    $parent.removeClass("btn_swtich_3bg");
                    $parent.addClass("btn_swtich_2bg");
                }, 20);
                $parent.find("input[type='hidden']").val(100);
            } else if (swname == 'gb') {
                $parent.find(".btn_swtich_anim").animate({
                    left: $(".btn_swtich_box").width() / 3.45
                }, 300);
                setTimeout(function() {
                    $parent.removeClass("btn_swtich_2bg");
                    $parent.removeClass("btn_swtich_3bg");
                    $parent.addClass("btn_swtich_1bg");
                }, 20);
                $parent.find("input[type='hidden']").val(994);
            } else if (swname == 'kq') {
                $parent.find(".btn_swtich_anim").animate({
                    left: $(".btn_swtich_box").width() / 1.73
                }, 300);
                setTimeout(function() {
                    $parent.removeClass("btn_swtich_2bg");
                    $parent.removeClass("btn_swtich_1bg");
                    $parent.addClass("btn_swtich_3bg");
                }, 20);
                $parent.find("input[type='hidden']").val(1900);
            }
        });
        //按钮脚本 结束

        // 操作盘直径，中心方向指示盘直径，最大拖拽距离
        var joystickLen = 7, insideLen = 2, maxDragLen = 5.5; 
        var htmlRem = parseInt($("html").css("font-size").replace("px",""));// html根标签的字体大小
        var dragLen = $("html").width()/htmlRem;// 拖动区域宽度
        var $joystick = $("#joystick") // 操作盘对象
        var $drag = $("#drag") // 拖动有效区域对象
        var $inside = $("#inside");     // 白色内盘对象
        //var $joystick1 = $("#joystick1") // 操作盘对象
        //var $drag1 = $("#drag1") // 拖动有效区域对象
        //var $inside1 = $("#inside1");     // 白色内盘对象
        
        // 初始化左摇杆控件大小（宽度、高度）
        $joystick.css({"height":10+'rem',//"height":(joystickLen-0.5*2) + 'rem',
                        "width":10+'rem',//"width":(joystickLen-0.5*2) + 'rem',
                        "marginLeft": -(joystickLen)/2 + 'rem',
                        "marginBottom": (insideLen)+'rem',// 0.5*2是边框
                        "opacity": 1});   
        $drag.css({"height":11 + 'rem',
                    "width":11 + 'rem',
                    "marginLeft": -(joystickLen)/2 + 'rem',
                    "marginBottom": (insideLen)+'rem'});
        $inside.css({"height":2 + 'rem',//"height":(insideLen - 0.3*2) + 'rem',
                     "width":2 + 'rem',   //"width":(insideLen - 0.3*2) + 'rem',
                      "margin":3.7 + 'rem'});//  "margin":((joystickLen-0.5*2) - insideLen)/2 + 'rem'});  // 高度减去边框
        // 初始化右摇杆控件大小（宽度、高度）
        //$joystick1.css({"height":(joystickLen-0.5*2) + 'rem',
        //                "width":(joystickLen-0.5*2) + 'rem',
        //                "marginRight": -(joystickLen)/2 + 'rem',
        //                "marginBottom": (insideLen)+'rem'});    // 0.5*2是边框
        //$drag1.css({"height":7 + 'rem',
        //            "width":7 + 'rem',
        //            "marginRight": -(joystickLen)/2 + 'rem',
        //            "marginBottom": (insideLen)+'rem'});
        //$inside1.css({"height":(insideLen - 0.3*2) + 'rem',
        //                "width":(insideLen - 0.3*2) + 'rem',
         //               "margin":((joystickLen-0.5*2) - insideLen)/2 + 'rem'});  // 高度减去边框
 
        var htmlWidth = parseFloat($("html").css("width").replace("px",""));
        var htmlHeight = parseFloat($("html").css("height").replace("px",""));
        var hha;
        var hhb;
        var startX = htmlWidth*0.218;//htmlWidth/2; // 初始点击的位置
        var startY = (htmlHeight-(insideLen+joystickLen/2)*htmlRem)*0.8223;//htmlHeight-(insideLen+joystickLen/2)*htmlRem; // 初始点击的位置
        //var startX1 = htmlWidth*0.820198;//htmlWidth/2; // 初始点击的位置
        //var startY1 = (htmlHeight-(insideLen+joystickLen/2)*htmlRem)*0.933798;//htmlHeight-(insideLen+joystickLen/2)*htmlRem; // 初始点击的位置
        function dealTouch(e){
            e.preventDefault();
            var touch, touches = e.originalEvent.touches;  // 得到手指们
            for(var i=0; i<touches.length; i++){
                // 如果有多个手指，则得到按下inside或者drag的手指
                if(touches[i].target.className == 'drag'){
                    touch = touches[i];
                    break;
                }
            }
            var x = touch.pageX - startX;
            var y = touch.pageY - startY;
            // 超出最大距离，使用数学中圆的方法，限定x，y在圆的范围
            if(x*x+y*y > (htmlRem*maxDragLen)**2){
                // 更好的办法，使用tan和sin和cos
                tanXY = (Math.abs(y)/Math.abs(x));
                var atanXY = Math.atan(tanXY);
                tempX = Math.cos(atanXY)*htmlRem*maxDragLen
                tempY = Math.sin(atanXY)*htmlRem*maxDragLen
                x = x<0?-tempX:tempX;
                y = y<0?-tempY:tempY;
            }
            //进行换算成小车实际发送数值
            var pers = 10.16; var perl = 10.3;//定义两个奇葩的数值
            if(x<0){
                turex = x*pers+994;
            }else{
                turex = x*perl+994;
            }
            if(y>0){
                turey = Math.abs(y*pers-994);
            }else{
                turey = Math.abs(y)*perl+994;
            }

            var a = [turex.toFixed(0),turey.toFixed(0)];
            $inside.css('transform', 'translate('+x+'px,'+y+'px)');
            return a;
        }

        /*function dealTouch1(e){
            e.preventDefault();
            var touch1, touches1 = e.originalEvent.touches;  // 得到手指们
            for(var i=0; i<touches1.length; i++){
                // 如果有多个手指，则得到按下inside或者drag的手指
                if(touches1[i].target.className == 'drag1'){
                    touch1 = touches1[i];
                    break;
                }
            }
            var x1 = touch1.pageX - startX1;
            var y1 = touch1.pageY - startY1;
            // 超出最大距离，使用数学中圆的方法，限定x，y在圆的范围
            if(x1*x1+y1*y1 > (htmlRem*maxDragLen)**2){
                // 更好的办法，使用tan和sin和cos
                tanXY1 = (Math.abs(y1)/Math.abs(x1));
                var atanXY1 = Math.atan(tanXY1);
                tempX1 = Math.cos(atanXY1)*htmlRem*maxDragLen
                tempY1 = Math.sin(atanXY1)*htmlRem*maxDragLen
                x1 = x1<0?-tempX1:tempX1;
                y1 = y1<0?-tempY1:tempY1;
            }
            //进行换算成小车实际发送数值
            var pers1 = 15.96; var perl1 = 16.17;//定义两个奇葩的数值
            if(x1<0){
                turex1 = x1*pers1+994;
            }else{
                turex1 = x1*perl1+994;
            }
            if(y1>0){
                turey1 = Math.abs(y1*pers1-994);
            }else{
                turey1 = Math.abs(y1)*perl1+994;
            }

            var b = [turex1.toFixed(0),turey1.toFixed(0)];
            $inside1.css('transform', 'translate('+x1+'px,'+y1+'px)');
            return b;
        }*/
        
        // 当用户手指按下左摇杆的时候
        $drag.bind("touchstart",function(e){
            // 初始化中间的小绿点的动画
            dealTouch(e);
        });
        // 手指移动左摇杆的时候
        $drag.bind('touchmove',function(e){
            var aa = dealTouch(e);
            hha = aa;
        });
        // 手指离开左摇杆的时候
        $drag.bind("touchend",function(e){
            e.preventDefault();
            $inside.css('transform', 'none');   // 回归位置

            hha = 0;
        });

        // 当用户手指按下右摇杆的时候
        //$drag1.bind("touchstart",function(e){
            // 初始化中间的小绿点的动画
        //    dealTouch1(e);
        //});
        // 手指移动右摇杆的时候
        //$drag1.bind('touchmove',function(e){
        //   var bb = dealTouch1(e);
        //    hhb = bb;
        //});
        // 手指离开右摇杆的时候
        //$drag1.bind("touchend",function(e){
        //    e.preventDefault();
        //    $inside1.css('transform', 'none');   // 回归位置

            //hhb = 0;
        //});
        var port=8901;
        var carx;
        var cary;
        var yunx=850;
        var yuny=650;
        var arr;

        function yun(i){
            switch(i){
                case 1:
                    if(yunx<1900){
                        yunx = yunx+10;
                    }else{
                        yunx = 1900;
                    }
                    break;
                case 2:
                    if(yuny<1900){
                        yuny = yuny+10;
                    }else{
                        yuny = 1900;
                    }
                    break;
                case 3:
                    if(yunx <= 100){
                        yunx = 100;
                    }else{
                        yunx = yunx-10;
                    }
                    break;
                case 4:
                    if(yuny <= 100){
                        yuny = 100;
                    }else{
                        yuny = yuny-10;
                    }
                    break;
            }
        }

        setInterval(function(){
            var dcf1 = $('#dcf1').val();
            var dcf2 = $('#dcf2').val();
            var tg1 = $('#tg1').val();
            var tg2 = $('#tg2').val();
            var sbdj = $('#sbdj').val();
            var zmd = $('#zmd').val();
            var jdq = $('#jdq').val();
            if(!hha){
                arr= [994,0,994,0,dcf1,dcf2,tg1,tg2,sbdj,0,yunx,yuny,zmd,jdq,0,0,0,0,port];
                console.log(arr);
            }else{
                carx = hha[0];
                cary = hha[1];
                arr = [carx,0,cary,0,dcf1,dcf2,tg1,tg2,sbdj,0,yunx,yuny,zmd,jdq,0,0,0,0,port];
                console.log(arr);
            }
            //ws.send(arr);
        },1000)//},20)
    </script>
</body>
</html>